---
import Page from '../../layouts/BlogPost.astro';
import { getEntry, getCollection, render } from 'astro:content';
import { formatDate } from "../../util";

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }))
}

const { slug } = Astro.params;

if (slug === undefined) {
    throw new Error('Slug is required');
}

const entry = await getEntry('blog', slug);

if(entry === undefined) {
    return Astro.redirect('/404');
}

const { Content } = await render(entry);
---
<Page title={entry.data.title} description={entry.data.description} pubDate={formatDate(entry.data.pubDate)} tags={entry.data.tags}>
    <main>
        <a href="/blog" class="back-link">← All articles</a>
        <article>
            <Content />
        </article>
    </main>
</Page>

<style is:global>
    img {
        width: 45%;
    }

    @media (max-width: 768px) {
        img {
            width: 50%;
        }
    }
</style>